import {nextTick, ref, computed,reactive} from "vue"
import {crmLeadsIndexAPI} from "@/api/crm/leads.js";
import {crmCustomerIndexAPI, crmCustomerPoolListAPI} from "@/api/crm/customer.js";
import {crmContactsIndexAPI} from "@/api/crm/contacts.js";
import {crmBusinessIndexAPI} from "@/api/crm/business.js";
import {crmContractIndexAPI} from "@/api/crm/contract.js";
import {crmProductIndexAPI} from "@/api/crm/product.js";
import {crmReceivablesIndexAPI} from "@/api/crm/receivables.js";
import {crmReturnVisitIndexAPI} from "@/api/crm/visit.js";
import {crmInvoiceIndexAPI} from "@/api/crm/invoice.js";
import {crmReceivablesPlanIndexAPI} from "@/api/crm/receivablesPlan.js";
import crmTypeModel from "@/views/crm/model/crmTypeModel.js";
import {isArray} from "utils/types.js";
import {toUnderScoreCase} from "utils";
import {filedGetPoolTableFieldAPI, filedGetTableFieldAPI} from "@/api/crm/common.js";
import merge from "utils/merge.js";
import {useErpUserStore} from "@/store/modules/usererp.js";

export function useTableIndex() {

  const crm = computed(() => {
    const erpUserStore = useErpUserStore();
    return erpUserStore.crm
  })

  const DefaultFilterProps = {
    isSelect: false, // 仅选择数据用  禁用数据刷新重置勾选
    showScene: true,
    showSearch: true,
    showModuleName: true, //  左侧布局
    selectionHandle: true, // 勾选不操作
    radio: false, // 是否单选
    // 搜索
    // 请求和参数
    request: null,
    params: null
  }
  const config = computed(() => {
    return merge({...DefaultFilterProps}, {})
  })


  const crmOption = reactive({
    crmType: 'leads',
    // 联动搜索内容
    search: "",
    loading: false,
    // 是否是公海
    isSeas: false,
    poolId: "",
    // 公海权限
    poolAuth: Object,
    sortData: {}, // 字段排序
    // 是否显示创建对话框
    createShow: false,
    createType: 'leads',
    createAction: {
      type: 'save',
      id: '',
      data: {}
    },
    showDview: false,
    tableHeight: (document.documentElement.clientHeight - 235)// 表的高度

  })


  const elTableOption = reactive({
    // tableHeight: el-table中的height属性
    tableHeight: (document.documentElement.clientHeight - 235), // 表的高度

    // rowID：对应c-r-m-all-detail 中的ID
    // 行信息
    rowID: '',

    // rowtype取值crmType
    // 详情类型
    rowType: '',

    /** 勾选行 */
    // 在selectedData的watch、handleSelectionChange、toggleRowSelection中使用
    selectionList: ([]),// 勾选数据 用于全局导出
    // 行索引
    // 主要在getRowIndex中使用
    rowIndex: 0,
    // 忽略勾选数据change 避免触发chang事件
    // 在handleSelectionChange中使用的，其中如果为true，就直接返回了，就不会触发selection-change事件了
    ignoreSelectedChange: false,
    selectedData: []
  })

  /** 高级筛选 */
  const tableHeadOption = reactive({
    // sceneId：好像是局部变量，只在这里使用。设置在handleScene中，  其他是传给params.sceneId
    // 场景筛选ID
    sceneId: '',

    // sceneName： 目前看来只是在tablehook中handlescene中使用了，别的地方没有使用。
    // 在crm-table-head中使用sceneData的name
    // 场景名字
    sceneName: '',

    // sortData: 用在crm-table-head中，在其props中定义了
    // var的类型定义，不够好。
    // 字段排序
    sortData: {},

    // filterObj： 用在crm-table-head，在crm-table-head中已经存在data了,
    // 筛选确定数据
    filterObj: []
  })


  const fieldAndListOption = reactive({
    // fieldList是字段信息,获取的地方在getFieldList函数中
    fieldList: [],
    // dataList是字段请求的数据信息,获取的地方在getList函数中
    dataList: [],
    // 返回的接口数据中，存在extraData字段，放到这里，比如合同中的金额，商机中的金额
    extraData: {},
    // 已经发请求 用于缓存区分，主要用在crmIndexRequest和getList的前置判断
    isRequested: false
  })


// 分页的相关代码
  const paginationOption = reactive({
    pageSize: 10,
    currentSize: 1,
    total: 0
  })


  /**
   * 获取列表请求
   */
// 在getList中使用
  function getIndexRequest(crmType, isSeas) {
    if (crmType === 'leads') {
      return crmLeadsIndexAPI
    } else if (crmType === 'customer') {
      if (isSeas) {
        return crmCustomerPoolListAPI
      } else {
        return crmCustomerIndexAPI
      }
    } else if (crmType === 'contacts') {
      return crmContactsIndexAPI
    } else if (crmType === 'business') {
      return crmBusinessIndexAPI
    } else if (crmType === 'contract') {
      return crmContractIndexAPI
    } else if (crmType === 'product') {
      return crmProductIndexAPI
    } else if (crmType === 'receivables') {
      return crmReceivablesIndexAPI
    } else if (crmType === 'visit') {
      return crmReturnVisitIndexAPI
    } else if (crmType === 'invoice') {
      return crmInvoiceIndexAPI
    } else if (crmType === 'receivablesPlan') {
      return crmReceivablesPlanIndexAPI
    }
  }


  /**
   * 获取字段
   * @param {*} force
   */
// 这个函数中有props.isSeas和props.poolId没有处理
// 在onMounted中有调用
  function getFieldList(force = false) {
    // 如果fieldList没有数据或者force为空，就强制请求数据
    if (fieldAndListOption.fieldList.length == 0 || force) {
      // hookConfig.configOption.loading = true
      crmOption.loading = true

      const params = {}
      if (crmOption.isSeas) {
        if (tableHeadOption.poolId) {
          params.poolId = tableHeadOption.poolId
        }
      } else {
        params.label = crmTypeModel[crmOption.crmType]
      }

      const tableFieldRequest = crmOption.isSeas ? filedGetPoolTableFieldAPI : filedGetTableFieldAPI
      tableFieldRequest(params).then(res => {
        const fieldListTmp = []
        for (let index = 0; index < res.data.data.length; index++) {
          const element = res.data.data[index]
          let width = 0
          if (!element.width) {
            if (element.name && element.name.length <= 6) {
              width = element.name.length * 15 + 45
            } else {
              width = 140
            }
          } else {
            width = element.width
          }

          fieldListTmp.push({
            prop: element.fieldName,
            formType: element.formType,
            label: element.name,
            width: width,
            sortId: element.id
          })
        }
        fieldAndListOption.fieldList = fieldListTmp
      }).catch(() => {
        crmOption.loading = false
      })
    }
  }

  /**
   * 获取列表数据
   */
// 这个函数中props的几个变量没有处理
// 用在vue中的activated函数中，和在mounted中调用
  function getList() {
    crmOption.loading = true
    let crmIndexRequest = getIndexRequest(crmOption.crmType, crmOption.isSeas)
    let params = {
      page: paginationOption.currentPage,
      limit: paginationOption.pageSize,
      search: crmOption.search,
      type: crmOption.isSeas.value ? crmTypeModel.pool : crmTypeModel[crmOption.crmType] // 9是公海
    }
    if (tableHeadOption.sortData.order) {
      params.sortField = tableHeadOption.sortData.prop
      params.order = tableHeadOption.sortData.order == 'ascending' ? 2 : 1
    }
    if (tableHeadOption.sceneId) {
      params.sceneId = tableHeadOption.sceneId
    }

    // 公海切换
    if (tableHeadOption.poolId) {
      params.poolId = tableHeadOption.poolId;
    }

    if (tableHeadOption.filterObj && tableHeadOption.filterObj.length > 0) {
      params.searchList = tableHeadOption.filterObj
    }

    // 筛选props传入参数
    // 用于相关查询 包含Id的参数 需替换为下划线 通过类似高级筛选形式 实现
    if (config.params) {
      params = {...params}
      const searchList = params.searchList || []
      for (const key in config.value.params) {
        const keyValue = config.value.params[key]
        if (key === 'checkStatus') {
          searchList.push({
            formType: 'checkStatus',
            name: 'checkStatus',
            type: 1,
            values: isArray(keyValue) ? keyValue : [keyValue]
          })
        } else {
          searchList.push({
            formType: 'text',
            name: key.includes('Id') ? toUnderScoreCase(key) : key,
            type: 1,
            values: isArray(keyValue) ? keyValue : [keyValue]
          })
        }
      }
      params.searchList = searchList
    }

    let moneyData = {}
    crmIndexRequest(params).then(res => {
      console.log("res,", res)
      // 需为true 才会触发客户列表和公海列表展示之后的刷新
      fieldAndListOption.isRequested = true

      if (crmOption.crmType === 'customer') {
        fieldAndListOption.dataList = res.data.data.list.map(element => {
          element.show = false; // 控制列表商机展示
          return element;
        })
        console.log("fieldAndListOption.dataList ", fieldAndListOption.dataList)
      } else {
        if (crmOption.crmType === 'contract' ||
            crmOption.crmType === 'receivables' ||
            crmOption.crmType === 'receivablesPlan' ||
            crmOption.crmType === 'business') {
          // 合同/回款列表展示金额信息
          // todo whf 这里的计算拿掉，放到各自的组件中去实现
          moneyData = (res.data.data.extraData ? res.data.data.extraData.money || {} : {})
        }
        fieldAndListOption.extraData = moneyData
        fieldAndListOption.dataList = res.data.data.list
      }
      if (res.data.data.totalRow
          && Math.ceil(res.data.data.totalRow / paginationOption.pageSize) < paginationOption.currentPage
          && paginationOption.currentPage > 1) {
        paginationOption.currentPage = paginationOption.currentPage - 1
        getList()
      } else {
        paginationOption.total = res.data.data.totalRow
        crmOption.loading = false
        // hookConfig.configOption.loading = false
      }

      nextTick(() => {
        document.querySelector('.el-table__body-wrapper').scrollTop = 1
      }).then(r => {
        console.log(r)
      })
    }).catch((r) => {
      console.log("r", r)
      crmOption.loading = false
    })
  }


  return {
    crm,DefaultFilterProps,config,
    crmOption, elTableOption, tableHeadOption, fieldAndListOption, paginationOption: paginationOption,
    getIndexRequest, getList, getFieldList
  }
}